<template>
  <div class="home"
    @mousedown="handlemousedown"
    @mouseup="handlemouseup"
    @click='handleClick'>
    <section class="home-wrapper">
      <section class="wrapper-left">
        <homeNav></homeNav>
      </section>
      <section class="padding-box">
        <homeHeader></homeHeader>
        <div class='padding-box-content'>
          <section
            class='box-wrapper-left'
            v-show='subMenuList[0] && !isOccupyAll && isShowSubNav'>
            <homeSubNav></homeSubNav>
          </section>
          <!-- 非占满右侧页面 -->
          <section class="box-wrapper-right"
            v-if='!isOccupyAll'>
            <div class='box-wrapper-right-content'>
              <div class='box-wrapper-right-page'>
                <!-- <transition name="router-tran"> -->
                <!-- <keep-alive :exclude="['MedeventProcess', 'NewArticals', 'addLiveStream', 'addBroadcast', 'addPublicClass', 'addQa']"> -->
                <router-view class="children" />
                <!-- </keep-alive> -->
                <!-- </transition> -->
              </div>
            </div>
          </section>
          <!-- 占满右侧页面 -->
          <section class="occupyAll-wrapper-right" v-if='isOccupyAll'>
            <div class='occupyAll-wrapper-right-content'>
              <div class='occupyAll-wrapper-right-page'>
                <!-- <keep-alive :exclude="['MedeventProcess', 'NewArticals']"> -->
                <router-view/>
                <!-- </keep-alive> -->
              </div>
            </div>
          </section>
        </div>
      </section>
    </section>
  </div>
</template>

<script>
import homeHeader from 'public/homeHeader'
import homeNav from 'public/homeNav'
import homeSubNav from 'public/homeSubNav'
import { getOssInfo } from '@/api'
import * as qiniu from 'qiniu-js'
import qiuConfig from '@/assets/upload/upload'
// import { Base64 } from 'js-base64'
// import '@/assets/mock'
export default {
  components: {
    homeHeader,
    homeNav,
    homeSubNav
  },
  data () {
    return {
      timer: null,
      isHomePage: false,
      isShowSubNav: true,
      isOccupyAll: false
    }
  },
  methods: {
    handleClick () {
      if (window.isShowingQrCode) {
        window.eventBus.$emit('hideQrCode')
        delete window.isShowingQrCode
      }
    },
    handlemousedown () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
    },
    // 30分钟无操作，返回登录页
    handlemouseup () {
      this.timer = setTimeout(() => {
        // this.clearToken()
      }, 1000 * 60 * 30)
    },
    // 清除tokan
    clearToken () {
      let url = `/logout`
      let param = {
        token: sessionStorage.getItem('accessToken')
      }
      if (param.token) {
        this.post(url, param).then(res => {
          sessionStorage.clear()
          this.$router.push({name: 'Login'})
        }).catch(err => {
          this.handleError(err)
          sessionStorage.clear()
          this.$router.push({name: 'Login'})
        })
      } else {
        this.$router.push({name: 'Login'})
      }
    },
    // 全局获取个人信息， 存入vuex中
    getUserInfo () {
      this.loading = true
      let url = `/org/emp/current`
      let params = {
        // userId: sessionStorage.getItem('userId')
      }
      this.get(url, params).then(res => {
        if (res.data.code === 200) {
          let userName = res.data.data.userName
          let empId = res.data.data.empId
          let accountId = res.data.data.accountId
          sessionStorage.setItem('empId', empId)
          sessionStorage.setItem('accountId', accountId)
          this.setUserName(userName)
          // this.getMenuList(empId)
        } else {
          this.linkTo({name: 'Login'})
          sessionStorage.clear()
        }
      }).catch(e => {
        // this.$notify.error({
        //   title: '错误',
        //   message: '获取登录信息异常，请重新登录'
        // })
        this.handleError(e)
        sessionStorage.clear()
        // 开发时注释跳转Login
        this.linkTo({name: 'Login'})
      })
    },
    // 设置菜单
    // getMenuList (empId) {
    //   this.loading = true
    //   let url = `${this.SERVICE_ORG}/emp/menus?accountId=${sessionStorage.getItem('accountId')}`
    //   this.get(url).then(res => {
    //     this.loading = false
    //     if (res.data.code === 200) {
    //       let menus = res.data.data
    //       // this.setMenuList(menus)
    //       // let menuList = []
    //       // menus.forEach(ele => {
    //       //   menuList.push(ele.path)
    //       // })
    //       // sessionStorage.setItem('menuList', JSON.stringify(menuList))
    //       if (menus.length) {
    //         // 左侧边栏菜单
    //         let leftData = []
    //         menus.forEach((ele, index) => {
    //           if (ele.position === 'left' && ele.isShow) {
    //             leftData.push(ele)
    //           }
    //         })
    //         this.menuGroup(leftData)
    //       } else {
    //         this.setLeftLayerList([])
    //       }
    //     }
    //   }).catch(e => {
    //     this.loading = false
    //     this.handleError(e)
    //   })
    // },
    // 获取左侧侧边栏,通过mode区分是公众号还是企业号
    fetchLeftMenuList () {
      let url = `${this.SERVICE_ORG}/emp/${sessionStorage.getItem('platformMode')}/menus?accountId=${sessionStorage.getItem('accountId')}`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let menus = res.data.data
          if (menus) {
            this.setMenuList(menus)
            let menuList = []
            menus.forEach(ele => {
              menuList.push(ele.path)
            })
            sessionStorage.setItem('menuList', JSON.stringify(menuList))
            // 左侧边栏菜单
            let leftData = []
            if (menus.length) {
              menus.forEach((ele, index) => {
                if (ele.position === 'left' && ele.isShow) {
                  leftData.push(ele)
                }
              })
            }
            this.menuGroup(leftData)
          }
        }
      }).catch(err => {
        this.handleError(err)
      })
    },
    // 对左侧菜单进行分组分成公众号、企业号、设置三组(mode:0代表运维；1代表平台；2代表公众号； 3代表企业号； 4代表设置(系统或控制台)；)
    menuGroup (menuList) {
      let wechatMenuList = []
      let enterpriseMenuList = []
      let settingMenuList = []
      menuList.forEach(routeInfo => {
        if (Number(routeInfo.mode) === 2) {
          wechatMenuList.push(routeInfo)
        } else if (Number(routeInfo.mode) === 3) {
          enterpriseMenuList.push(routeInfo)
        } else if (Number(routeInfo.mode) === 4) {
          settingMenuList.push(routeInfo)
        }
      })
      let leftMenuList = []
      if (wechatMenuList.length) {
        // leftMenuList.push({
        //   title: '公众号',
        //   menuList: wechatMenuList
        // })
        leftMenuList = wechatMenuList
      }
      if (enterpriseMenuList.length) {
        // leftMenuList.push({
        //   title: '企业号',
        //   menuList: enterpriseMenuList
        // })
        leftMenuList = enterpriseMenuList
      }
      if (settingMenuList.length) {
        // leftMenuList.push({
        //   title: '系统业务',
        //   menuList: settingMenuList
        // })
        leftMenuList.push({
          menuName: '系统业务',
          children: settingMenuList
        })
      }
      this.setLeftLayerList(leftMenuList)
    },
    // 全局获取所有标签， 存入vuex中
    getTags () {
      if (!sessionStorage.getItem('wechatId')) {
        return
      }
      this.loading = true
      let appid = sessionStorage.getItem('appid')
      let url = `${this.SERVICE_WECHAT}/tag/${appid}/list`
      let param = {
        wechatId: sessionStorage.getItem('wechatId'),
        pageSize: 999
      }
      this.get(url, param).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          if (data && data.list && data.list.length) {
            this.setTagList(data.list)
          } else {
            this.setTagList([])
          }
        } else {
          this.setTagList([])
        }
      }).catch(e => {
        this.loading = false
        this.handleError(e)
      })
    }
  },
  watch: {
    $route (to, from) {
      // 控制页面是否与 主菜单栏/顶部菜单栏 是否有padding值
      // 如果为true, 则默认不显示二级菜单栏
      if (to.meta.isOccupyAll) {
        this.isOccupyAll = true
      } else {
        this.isOccupyAll = false
      }
      // 控制页面是否显示 二级菜单栏
      if (to.meta.hideSubMenu) {
        this.isShowSubNav = false
      } else {
        this.isShowSubNav = true
      }
    }
  },
  created () {
    this.handlemouseup()
    this.fetchLeftMenuList()
    getOssInfo().then(res => {
      if (res.data.code === 200) {
        if (res.data.data) {
          this.ossData = res.data.data
          let ossConfig = {}
          switch (this.ossData.region) {
            case 'huabei':
              ossConfig = {
                useCdnDomain: true, // 使用cdn加速
                region: qiniu.region.z1 // 华北地区
              }
              break
            case 'huadong':
              ossConfig = {
                useCdnDomain: true, // 使用cdn加速
                region: qiniu.region.z0 // 华东地区
              }
              break
            case 'huanan':
              ossConfig = {
                useCdnDomain: true, // 使用cdn加速
                region: qiniu.region.z2 // 华南地区
              }
              break
            case 'beimei':
              ossConfig = {
                useCdnDomain: true, // 使用cdn加速
                region: qiniu.region.na0// 北美地区
              }
              break
            case 'xinjiapo':
              ossConfig = {
                useCdnDomain: true, // 使用cdn加速
                region: qiniu.region.as0// 新加坡地区
              }
              break
          }
          qiuConfig.ossVue.ossConfig = ossConfig
        }
      }
    })
    setTimeout(() => {
      this.getTags()
      // this.getUserInfo()
    }, 500)
    // 控制页面是否与 主菜单栏/顶部菜单栏 是否有padding值
    // 如果为true, 则默认不显示二级菜单栏
    if (this.$route.meta.isOccupyAll) {
      this.isOccupyAll = true
    } else {
      this.isOccupyAll = false
    }
    // 控制页面是否显示 二级菜单栏
    if (this.$route.meta.hideSubMenu) {
      this.isShowSubNav = false
    } else {
      this.isShowSubNav = true
    }
  }
}
</script>

<style lang="stylus" scoped>
  .home
    scroll()
    overflow-x auto
    display flex
    flex-direction column
    &::-webkit-scrollbar-track
      background #f7f7f7
    .home-wrapper
      flex 1
      display flex
      width 100%
      overflow-y hidden
      .wrapper-left
        flex none
        width 180px
        position relative
        z-index 10
        height 100%
      .padding-box
        flex 1
        width calc(100% - 180px)
        background-color #f7f7f7
        .padding-box-content
          width 100%
          height calc(100vh - 56px)
          // min-width 1100px
          background-color #fafafa
          display flex
          .box-wrapper-left
            width 130px
            flex none
            background #fafafa
          .box-wrapper-right
            position relative
            flex 1
            height calc(100% - 22px)
            background #fafafa
            padding 10px
            .box-wrapper-right-content
              position relative
              background-color #fff
              box-shadow 0 0 4px 0 rgba(200, 200, 200, 0.4)
              box-sizing border-box
              padding 10px
              border-radius 5px
              height 100%
              .box-wrapper-right-page
                position relative
                height 100%
                background #f2f2f6
                border-radius 6px
                .children
                  position absolute
                  scroll()
                  // padded_box(border-box, 0 10px 0 0)
          .occupyAll-wrapper-right
            position relative
            flex 1
            width 100%
            height 100%
            background #fafafa
            // width calc(100vw - 180px)
            .occupyAll-wrapper-right-content
              position relative
              box-shadow 0 0 4px 0 rgba(200, 200, 200, 0.4)
              box-sizing border-box
              // padding 10px
              border-radius 5px
              height 100%
              .occupyAll-wrapper-right-page
                position relative
                height 100%
                background #f2f2f6
              .router-tran-enter
                transform translateX(-30px)
                opacity 0
              .router-tran-leave-to
                transform translateX(30px)
                opacity 0
              .router-tran-enter-active
                transition all .4s cubic-bezier(0,1,1,1) .3s
              .router-tran-leave-active
                transition all .4s cubic-bezier(0,1,1,1)
</style>
